<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'

interface Member {
  id: number
  name: string
  position: string
  family: string
  description: string
  avatar?: string
}

// 响应式数据
const searchQuery = ref('')
const currentPage = ref(1)
const pageSize = ref(9) // <CHANGE> 默认改为9条，适合3x3布局

// 模拟成员数据
const members = ref<Member[]>([
  {
    id: 1,
    name: '张文轩',
    position: '家族会长',
    family: '张氏家族',
    description: '德高望重，统领家族事务'
  },
    {
    id: 1,
    name: '张文轩',
    position: '家族会长',
    family: '张氏家族',
    description: '德高望重，统领家族事务'
  },
    {
    id: 1,
    name: '张文轩',
    position: '家族会长',
    family: '张氏家族',
    description: '德高望重，统领家族事务'
  },
    {
    id: 1,
    name: '张文轩',
    position: '家族会长',
    family: '张氏家族',
    description: '德高望重，统领家族事务'
  },
    {
    id: 1,
    name: '张文轩',
    position: '家族会长',
    family: '张氏家族',
    description: '德高望重，统领家族事务'
  },
    {
    id: 1,
    name: '张文轩',
    position: '家族会长',
    family: '张氏家族',
    description: '德高望重，统领家族事务'
  },
    {
    id: 1,
    name: '张文轩',
    position: '家族会长',
    family: '张氏家族',
    description: '德高望重，统领家族事务'
  },
    {
    id: 1,
    name: '张文轩',
    position: '家族会长',
    family: '张氏家族',
    description: '德高望重，统领家族事务'
  },
    {
    id: 1,
    name: '张文轩',
    position: '家族会长',
    family: '张氏家族',
    description: '德高望重，统领家族事务'
  },
    {
    id: 1,
    name: '张文轩',
    position: '家族会长',
    family: '张氏家族',
    description: '德高望重，统领家族事务'
  },
    {
    id: 1,
    name: '张文轩',
    position: '家族会长',
    family: '张氏家族',
    description: '德高望重，统领家族事务'
  },
    {
    id: 1,
    name: '张文轩',
    position: '家族会长',
    family: '张氏家族',
    description: '德高望重，统领家族事务'
  },
    {
    id: 1,
    name: '张文轩',
    position: '家族会长',
    family: '张氏家族',
    description: '德高望重，统领家族事务'
  },
    {
    id: 1,
    name: '张文轩',
    position: '家族会长',
    family: '张氏家族',
    description: '德高望重，统领家族事务'
  },
    {
    id: 1,
    name: '张文轩',
    position: '家族会长',
    family: '张氏家族',
    description: '德高望重，统领家族事务'
  },
    {
    id: 1,
    name: '张文轩',
    position: '家族会长',
    family: '张氏家族',
    description: '德高望重，统领家族事务'
  },
    {
    id: 1,
    name: '张文轩',
    position: '家族会长',
    family: '张氏家族',
    description: '德高望重，统领家族事务'
  },
    {
    id: 1,
    name: '张文轩',
    position: '家族会长',
    family: '张氏家族',
    description: '德高望重，统领家族事务'
  },
])

// 计算属性
const filteredMembers = computed(() => {
  if (!searchQuery.value) {
    return members.value
  }
  return members.value.filter(member =>
    member.name.includes(searchQuery.value) ||
    member.position.includes(searchQuery.value) ||
    member.family.includes(searchQuery.value)
  )
})

const paginatedMembers = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredMembers.value.slice(start, end)
})

// 方法
const handleSearch = () => {
  currentPage.value = 1
}

const handleSizeChange = (val: number) => {
  pageSize.value = val
  currentPage.value = 1
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
}

</script>

<template>
  <div class="member-list-container">
    <!-- 搜索区域 -->
    <div class="search-section">
      <div class="search-card">
        <span class="search-label">搜索：</span>
        <el-input
          v-model="searchQuery"
          placeholder="请输入姓名、职位或家族"
          class="search-input"
          clearable
          @input="handleSearch"
        />
      </div>
    </div>

    <!-- <CHANGE> 改为3列网格布局的成员卡片 -->
    <div class="members-grid">
      <div
        v-for="member in paginatedMembers"
        :key="member.id"
        class="member-card"
      >
        <div class="member-avatar">
          <div class="avatar-placeholder">
            <span class="avatar-text">头像</span>
          </div>
        </div>
        <div class="member-info">
          <div class="member-header">
            <span class="position">{{ member.position }}</span>
            <span class="name">{{ member.name }}</span>
            <span class="family">{{ member.family }}</span>
          </div>
          <div class="member-description">
            {{ member.description }}
          </div>
        </div>
      </div>
    </div>

    <!-- <CHANGE> 添加底部间距避免与黄色边栏重叠 -->
    <div class="pagination-wrapper">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[9, 18, 27, 36]"
        :total="filteredMembers.length"
        layout="total, prev, pager, next, jumper"
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>


<style lang="scss" scoped>
.member-list-container {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f1e8 0%, #ede4d3 100%);
  font-family: 'SimSun', serif;
  padding: 2rem;
  padding-bottom: 200px; // <CHANGE> 添加底部间距避免与黄色边栏重叠
}

.search-section {
  margin-bottom: 2rem;
  display: flex;
  justify-content: center;
}

.search-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 1.5rem 2rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(218, 165, 32, 0.2);
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 500px;
  width: 100%;
}

.search-label {
  font-size: 1rem;
  color: #8b4513;
  font-weight: 500;
  white-space: nowrap;
}

.search-input {
  flex: 1;
  
  :deep(.el-input__wrapper) {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(218, 165, 32, 0.3);
    border-radius: 8px;
    box-shadow: none;
    
    &:hover {
      border-color: rgba(218, 165, 32, 0.5);
    }
    
    &.is-focus {
      border-color: #daa520;
      box-shadow: 0 0 0 2px rgba(218, 165, 32, 0.2);
    }
  }
  
  :deep(.el-input__inner) {
    color: #8b4513;
    font-family: 'SimSun', serif;
    
    &::placeholder {
      color: rgba(139, 69, 19, 0.5);
    }
  }
}

// <CHANGE> 改为3列网格布局
.members-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.member-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(218, 165, 32, 0.2);
  transition: all 0.3s ease;
  display: flex;
  gap: 1rem;
  height: 140px; // <CHANGE> 固定高度保持一致性
  
  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 48px rgba(218, 165, 32, 0.2);
    border-color: rgba(218, 165, 32, 0.4);
  }
}

.member-avatar {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  
  .avatar-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f0e68c 0%, #daa520 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(218, 165, 32, 0.3);
    
    .avatar-text {
      color: #8b4513;
      font-size: 0.875rem;
      font-weight: 500;
      writing-mode: vertical-rl;
      text-orientation: upright;
    }
  }
}

.member-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.member-header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  
  .position {
    font-size: 0.875rem;
    color: #daa520;
    font-weight: 600;
  }
  
  .name {
    font-size: 1rem;
    color: #8b4513;
    font-weight: 700;
  }
  
  .family {
    font-size: 0.875rem;
    color: rgba(139, 69, 19, 0.7);
  }
}

.member-description {
  flex: 1;
  font-size: 0.875rem;
  color: rgba(139, 69, 19, 0.8);
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.pagination {
  :deep(.el-pagination) {
    .el-pagination__total,
    .el-pagination__sizes,
    .el-pagination__jump {
      color: #8b4513;
      font-family: 'SimSun', serif;
    }
    
    .el-pager li {
      background: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(218, 165, 32, 0.3);
      color: #8b4513;
      font-family: 'SimSun', serif;
      margin: 0 2px;
      border-radius: 6px;
      
      &:hover {
        background: rgba(218, 165, 32, 0.1);
        border-color: #daa520;
      }
      
      &.is-active {
        background: #daa520;
        border-color: #daa520;
        color: white;
      }
    }
    
    .btn-prev,
    .btn-next {
      background: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(218, 165, 32, 0.3);
      color: #8b4513;
      border-radius: 6px;
      
      &:hover {
        background: rgba(218, 165, 32, 0.1);
        border-color: #daa520;
      }
    }
  }
  
  :deep(.el-select) {
    .el-select__wrapper {
      background: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(218, 165, 32, 0.3);
      border-radius: 6px;
      
      &:hover {
        border-color: #daa520;
      }
    }
    
    .el-select__selected-item {
      color: #8b4513;
      font-family: 'SimSun', serif;
    }
  }
}
</style>